<template>
  <!-- 作业管理--------------------------------------  p2------------------------------------------------ -->
  <div class="container-homework">
    <!-- 筛选搜索 -->
    <div class="screen">
      <div class="onerow">
        <el-input
          v-model="search.workId"
          placeholder="请输入作业ID"
          clearable
        ></el-input>
        <el-input
          v-model="search.name"
          placeholder="请输入教师姓名"
          clearable
        ></el-input>
      </div>
      <div class="tworow">
        <div class="twoleft">
          <el-select v-model="search.class" placeholder="班级">
            <!-- <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option> -->
          </el-select>
          <el-select v-model="search.type" placeholder="作业类型">
            <!-- <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option> -->
          </el-select>
          <el-select v-model="search.state" placeholder="状态">
            <!-- <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option> -->
          </el-select>
          <el-select v-model="search.ach" placeholder="成绩">
            <!-- <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option> -->
          </el-select>
          <el-button>搜索</el-button>
        </div>
        <div class="tworight">
          <el-button>重置搜索</el-button>
          <el-button @click="$router.push('/assignment')">布置作业</el-button>
          <el-button @click="exportExl">导出列表</el-button>
        </div>
      </div>
    </div>
    <!-- 内容列表 -->
    <el-divider></el-divider>
    <div class="conList">
      <div class="conHeader">
        <div>
          当前结果：<span>总击 {{ total }} 条记录</span>
        </div>
        <el-select
          v-model="search.custom"
          class="zidingyi"
          placeholder="自定义显示列"
        >
          <!-- <el-option label="男" value="0"></el-option>
          <el-option label="女" value="1"></el-option> -->
        </el-select>
      </div>
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column prop="id" label="序号" width="80"> </el-table-column>
        <el-table-column prop="workId" label="作业ID" width="120">
        </el-table-column>
        <el-table-column prop="classId" label="年级">
          <template slot-scope="scope">{{ scope.row.classId }}</template>
        </el-table-column>
        <el-table-column prop="teacherId" label="教师姓名">
          <template slot-scope="scope">{{ scope.row.teacherId }}</template>
        </el-table-column>
        <el-table-column prop="workType" label="作业类型">
          <template slot-scope="scope">{{ scope.row.workType }}</template>
        </el-table-column>
        <el-table-column prop="workContent" label="作业内容"> </el-table-column>
        <el-table-column prop="progress" label="进度">
          <template slot-scope="scope">{{ scope.row.progress }}%</template>
        </el-table-column>
        <el-table-column prop="state" label="状态"> </el-table-column>
        <el-table-column prop="result" label="成绩"> </el-table-column>
        <el-table-column prop="createTime" label="发布时间"> </el-table-column>
        <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <!-- <el-button
              type="primary"
              @click="toEdit(scope.row.id)"
            >操作</el-button> -->
            <el-select
              v-model="operVal"
              @change="change(scope.row.id)"
              placeholder="操作"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="total, prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="page"
        @current-change="changePage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { exportExecl } from '@/api/index'
export default {
  name: 'homework-sup',
  data() {
    return {
      search: {
        // 班级
        class: '',
        // 作业类型
        type: '',
        // 状态
        state: '',
        ach: '',
        // 作业ID
        workId: '',
        // 教师姓名
        name: '',
        // 自定义
        custom: ''
      },
      // 总条数
      total: 0,
      // 每页多少条
      pageSize: 8,
      //页码
      page: 0,
      offset: 0,
      // 数据加载时
      loading: true,
      // 列表数据
      tableData: [{
        id: 1,
        workId: 1,
        classId: 2,
        teacherId: '小王',
        workType: '数学',
        workContent: '寒假作业',
        progress: '60%',
        state: '进行中',
        result: '暂无',
        createTime: '2020-20-12'
      }],
      options: [{
        value: '1',
        label: '删除'
      }, {
        value: '2',
        label: '详情'
      }],
      // operVal
      operVal: '',
    }
  },
  created() {
    this.getWorkTable()
    this.$store.commit('common/workTabPane', { url: 'commission_default' })
  },
  methods: {
    change(id) {
      if (this.operVal === '2') {
        this.$router.push({ path: `/commission_details`, query: { id } })
        this.operVal = ''
      } else {
        this.$confirm('此操作将删除该作业, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delWorkTable(id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        this.operVal = ''
      }
    },
    // 作业管理首页表
    getWorkTable() {
      this.$http({
        url: this.$http.adornUrl('queryPageWork'),
        method: 'POST',
        data: {
          "sort": true,
          "offset": this.offset,
          "pageSize": this.pageSize,
          "queryParam": JSON.parse(sessionStorage.getItem('userMsg'))
        }
      }).then(res => {
        console.log('作业管理-首页列表', res);
        if (res.status === 200) {
          this.tableData = res.data.rows
          this.total = res.data.total
          this.loading = false
        }
      })
    },
    // 删除作业管理列表数据
    delWorkTable(id) {
      this.$http({
        url: this.$http.adornUrl(`delWork/` + id),
        method: 'POST',
      }).then(res => {
        console.log('删除作业', res);
        setTimeout(() => {
          if (res.data.errorCode == 0) {
            this.getWorkTable()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        }, 100)
      })
    },

    // 导出excel
    async exportExl() {
      console.log('1232132');
      const res = await exportExecl({
        offset: 0,
        pageSize: 10,
        queryParam: JSON.parse(sessionStorage.getItem('userMsg'))
      })
      console.log(res);

      let blob = new Blob([res.data], {
        type: 'application/vnd.ms-excel'
      })
      let url = window.URL.createObjectURL(blob)
      let a = document.createElement('a')
      a.href = url
      // document.body.appendChild(a)
      // window.open()
      a.download = '作业管理1111.xlsx'
      a.click()
      window.URL.revokeObjectURL(a.href)
    },
    // 分页函数
    changePage(newPage) {
      this.page = newPage; //页码
      console.log(newPage);
      this.offset = this.pageSize * (newPage - 1);
      this.getWorkTable()
    }
  }
}
</script>

<style lang="scss" scoped>
.zidingyi {
  /deep/ .el-input__inner,
  /deep/.el-input .el-input__count .el-input__count-inner {
    background-color: #f7fbfc;
    line-height: 0.2188rem;
    width: 0.9396rem !important;
    border-radius: 0.0521rem;
  }
}
/deep/.el-table th {
  font-size: 0.0938rem;
}
.container-homework {
  padding: 0.1667rem 0.1406rem;
  background-color: #fff;
  border-radius: 0.0781rem;
  // 筛选部分
  .screen {
    .onerow {
      display: flex;
      /deep/.el-input--suffix .el-input__inner,
      .el-input--medium {
        background-color: #f7fbfc;
        height: 0.2188rem;
        width: 1.25rem;
        margin-right: 0.1927rem;
        border-radius: 0.0521rem;
      }
    }
    .tworow {
      display: flex;
      justify-content: space-between;
      .twoleft {
        /deep/.el-input--medium .el-input__inner,
        .el-input--suffix .el-input__inner,
        .el-select .el-input__inner {
          background-color: #f7fbfc;
          height: 0.2188rem;
          width: 0.7396rem;
          border-radius: 0.0521rem;
        }
        .el-select {
          margin: 0.1042rem 0.1042rem 0 0;
        }
        .el-button {
          width: 0.4479rem;
          height: 0.2188rem;
          background: #0fdd8d;
          color: #fff;
          border-radius: 0.0521rem;
        }
      }
      .tworight {
        margin-top: 0.1042rem;
        .el-button {
          width: 0.7396rem;
          height: 0.2188rem;
          background: #f7fbfc;
          border-radius: 0.0521rem;
        }
        .el-button:nth-child(2) {
          background-color: #24aaff;
          color: #fff;
        }
        .el-button:nth-child(3) {
          background-color: #0fdd8d;
          color: #fff;
        }
      }
    }
  }
  // 内容列表
  .conList {
    .conHeader {
      display: flex;
      justify-content: space-between;
      line-height: 0.1875rem;
      font-size: 0.0729rem;
      margin-bottom: 0.0781rem;
      div {
        color: #525252;
        span {
          color: #888888;
        }
      }
      /deep/.el-select > .el-input--medium > .el-input__inner,
      /deep/.el-input .el-input__count .el-input__count-inner {
        background-color: #f7fbfc;
        line-height: 0.2188rem;
        width: 0.7396rem;
        border-radius: 0.0521rem;
      }
    }
    .el-table {
      /deep/.el-input--medium .el-input__inner,
      .el-input--suffix .el-input__inner,
      .el-select .el-input__inner {
        width: 0.4479rem;
        height: 0.1875rem;
        background: #f8f8f8;
        border-radius: 0.0938rem;
        padding: 0 0.1042rem 0 0.1302rem;
        color: #888888;
      }
      /deep/.el-input__suffix {
        display: none;
      }
    }
  }
}
</style>
